<template id="about_coach">
	<div class="about_coach">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/about_class"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>{{most.coach.name}}</p>
				<div class="about_select">
					<div class="about_ing"></div>
				</div>

			</div>
		</div>
		<!--头部结束-->
		<!--专长/绑定教练-->

		<div class="about_special">
			<div class="about_model">
				<p>专长</p>
				<div class="about_dan">
					<span>{{most.major[0]}}</span>
					<font></font><span>{{most.major[1]}}</span>
					<font></font><span>{{most.major[2]}}</span></div>
			</div>
			<button @click.stop="bund(most.coach.coachid)">绑定教练</button>
		</div>
		<!--专长/绑定教练结束-->

		<!--视频-->
		<div class="container" style="margin-top:13px;">
			<div class="player">
				<video v-lazy="most.coach.video" width="100%" height="200" :controls="isControls" ref="myVideo"></video>
				<div @click.stop="autoplay" v-show="videoIsPlay" class="quan"></div>
				<div class="logo" v-show="videoLogo"></div>
			</div>
		</div>

		<!--视频结束-->
		<div class="about_stil"></div>

		<!--教练的图片-->
		<div class="about_img">
			<div class="about_img_left"><img v-lazy="coachphoto[0].photo" preview preview-text="" /></div>
			<div class="about_img_right">
				<img v-lazy="item.photo" v-for="(item, index) in coachphoto" :preview="index+'1'" preview-text="" alt="" v-if="index!=0">
			</div>
		</div>
		<!--教练的图片结束-->
		<div class="about_href"></div>

		<!--教练简介-->
		<div class="about_summary">
			<h1>教练简介</h1>
			<p :class="isOverFlow ? 'isOverFlow' : ''">{{brief}}</p>

			<div class="about_total" @click.stop="textAllIsShow">

				<span>查看全部</span>
				<img v-lazy="imgUrl" alt="" />

			</div>

		</div>
		<!--教练简介结束-->

		<div class="about_stil"></div>

		<!--用户的留言-->
		<div class="about_word">
			<h1 v-if="sumNum">课程评价 ({{sumNum}})</h1>
			<div class="about_wrap" v-for="(list,index) in eval">
				<dl>
					<dt><img v-lazy="list.userphoto"/></dt>
					<dd>
						<p>{{list.username}}</p>
						<span>{{list.create_time | formatDate}}</span>

					</dd>
				</dl>
				<p>{{list.content}}</p>
			</div>

			<div class="about_total" @click.stop="all">
				<div @click.stop="haha"><span>查看所有评价</span><img src="../../assets/images/ranking_list/other.png" /></div>
			</div>
		</div>
		<!--用户的留言结束-->

		<!--底部立即预约/点赞/分享-->

		<div class="about_share" style="bottom: 0px;">
			<div class="about_enter">
				<div class="about_enter_left" @click.stop="Meaning(1)">
					<img src="../../assets/images/class/dianzan_hui_19.png" v-if="index=='0'||index=='2'" />
					<img src="../../assets/images/class/dianzan_huang.png" v-if="index=='1'" />
					<p>点赞</p>
				</div>
			</div>
			<div class="about_user" @click.stop="inSelf">
				立即预约
				<!--/appointment_coach-->
			</div>
		</div>
		<!--		底部立即预约/点赞/分享结束-->

	</div>
</template>

<script>
	import moment from 'moment'

	export default {
		name: 'BusImg',
		data() {
			let myURL = require('../../assets/images/ranking_list/other.png'); // 动态引入图片路径
			return {
				index: '0',
				videoIsPlay: true,
				videoLogo: true,
				isControls: false,
				isOverFlow: true,
				imgUrl: myURL,
				most: {
					coach: {},
					major: [],
				},
				coachphoto: [{
					photo: ''
				}],
				eval: [],
				brief: '',
				sumNum: '',
				coachid: this.$route.query.coachid,
				objid:'1'
			}

		},
		computed: {},
		components: {},
		created() {
			
			
			let obj = {
				//请求的参数
				coachid:this.coachid,
				code: 1
			};
      let code = this.getQueryString("code");
      console.log("code"+code);
      if (code != null) {
          let obj1 = {
            code: code
          }
          this.$axios.post("/Scanning/pay/getWxOpenid", obj1, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
            //重写headers 请求头  qs.stringify(json对象) 把对象转化为字符串
          }).then(function (response) {
            window.localStorage.setItem("openid", response.data.data);
          }).catch(function (error) {
            console.log(error);
          });
        }
        console.log(obj)
        let _this = this;
        let qs = require('qs');
        this.$axios.post("/yujia/coach/showCoachHomepage", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
          //重写headers 请求头  qs.stringify(json对象) 把对象转化为字符串
        }).then((response) => {
          _this.most = response.data.data;
          _this.coachphoto = response.data.data.coachphoto;
          let sliceEval;
          if (response.data.data.evaluate && response.data.data.evaluate.length >= 4) {
            sliceEval = response.data.data.evaluate.slice(0, 4);
          } else {
            sliceEval = response.data.data.evaluate;
          }
          _this.eval = sliceEval;
          _this.sumNum = _this.eval.length;
          _this.brief = decodeURI(response.data.data.coach.brief)
          //解码decodeURI()
          for (let i = 0; i < _this.eval.length; i++) {
            _this.eval[i].content = decodeURI(response.data.data.evaluate[i].content);
          }
          _this.kil = decodeURI(response.data.data.evaluate[0].content)
        }).catch(function (error) {
          console.log(error);
        });
		},
		beforeMount(){
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				let obj = {
					coachid: this.$route.query.coachid,
					userid: SESSION_ID.user.id,
				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("/yujiaextend/user/checkThumbsIsOff", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					console.log(response)
					// _this.index = 
					if(response.data.code == 0){
						 _this.index = 1
					}else{
					     _this.index = 0
					}


				}).catch(function(error) {
					console.log(error);
				})
		},
		methods: {
			Meaning(index) {
			
				
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null) {
					mui.alert("请登录")
					var about_coach
					this.$router.push({
						path: "/forgot_password",
						query:{
							about_coach:'about_coach',
							coachid:this.coachid
						}
					})
					return;
				};
				let obj = {
					coachid: this.$route.query.coachid,
					sessionid: SESSION_ID.sessionid,
					userid: SESSION_ID.user.id,
				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("/yujia/user/userGiveTheThumbsUpToCoach", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
                  console.log(response)
					if(response.data.code =='1'){
						_this.index = index
						mui.alert(response.data.message)
					}else if(response.data.code =='-2'){
						mui.alert(response.data.message)
					}

				}).catch(function(error) {
					console.log(error);
				})
			},

			autoplay() {
				this.videoIsPlay = false;
				this.videoLogo = false;
				this.isControls = true;
				this.$refs.myVideo.play();
			},
			textAllIsShow() {
				this.isOverFlow = !this.isOverFlow;
				if(this.isOverFlow) {
					this.imgUrl = require('../../assets/images/ranking_list/other.png');
				} else if(!this.isOverFlow){
					this.imgUrl = require('../../assets/images/about_coach/down.png');
				}
			},
			all() {
				let obj = {
					//请求的参数
					coachid: 88891,
					code: 1,

				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("/yujia/coach/showCoachHomepage", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {

					console.log(response)

				}).catch(function(error) {
					console.log(error);
				});

			},
			//绑定教练
			bund(coachid) {
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				 var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null) {
					mui.alert("请登录")
					// this.$router.push("/forgot_password")
					var about_coach
					// this.$router.push({
					// path: "/forgot_password",
					// query: {
					// 	select_address:'select_address'
					// }
					// this.$route.push({
					// 	 path: "/forgot_password",
					// 	 query: {
					// 	  about_coach:'about_coach'
					// 	}
					// })
					this.$router.push({
						path: "/forgot_password",
						query:{
							about_coach:'about_coach',
							coachid: this.coachid
						}
					})
					return;
				};
				let obj = {
					coachid: this.$route.query.coachid,
					sessionid: SESSION_ID.sessionid,
					userid: SESSION_ID.user.id,
					code: 1,
					coachid: coachid
				};

				let _this = this
				let qs = require('qs');
				this.$axios.post("/yujia/user/insertMyCoach", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
				    console.log(response)
					if(response.data.code == 0) {
						//绑定教练成功
						mui.alert("该教练已经存在您的专属教练")
					}else if(response.data.code == 1){
						mui.alert("添加我的教练成功")
					}

				}).catch(function(error) {
					console.log(error);
				});
			},
			haha() {
				console.log(this.$route.query.coachid)
				this.$router.push({
					path: "/all_evaluation",
					query: {
						coachid: this.$route.query.coachid
					}
				})
			},
      getQueryString(name) {
        let href = window.location.href;
        let param = href.split("?")[1];
        if(param==null){
          return null;
        }
        let allparam = param.split("&");
        let map = new Map();
        for(let i=0;i<allparam.length;i++){
          let key = allparam[i].split("=")[0];
          let value = allparam[i].split("=")[1];
          map.set(key,value);
        }
        if(map.get(name)!=null){
          return map.get(name);
        }else {
          return null;
        }
      },
			inSelf() {
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				 var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null) {
					mui.alert("请登录")
					// this.$router.push("/forgot_password")
					var about_coach
						this.$router.push({
						path: "/forgot_password",
						query:{
							about_coach:'about_coach',
							coachid: this.coachid
						}
					})
					return;
				}else{
					this.$router.push({
					path: "/appointment_coach",
					query: {
						coachid: this.$route.query.coachid
					}
				})
				}
				
			},

		},
		//		将时间戳转换成日期格式
		filters: {
			formatDate: function(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
		},
		mounted() {
			let _this = this;
			setTimeout(function() {
				let myVideo = _this.$refs.myVideo;
				myVideo.addEventListener('pause', function() {
					_this.videoIsPlay = true;
					_this.isControls = false;
				})
			}, 300)
		}
	}
</script>

<style scoped>
	@import "../../assets/css/about_coach.css";
	.player {
		position: relative;
		height: 210px;
	}
	
	.player .quan{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index:2;
		background: rgba(0, 0, 0, 0.2) url(../../assets/images/about_coach/video_11.png) no-repeat 50% 50%;
		background-size: 45px 45px;
	}
	.player .logo {
		width: 150px;
		height: 38px;
		position: absolute;
		left: 35%;
		top: 38%;
		z-index: 1;
		background: url(../../assets/images/about_coach/video_logo.png) no-repeat 50% 50%;
		background-size: 100% 100%;
	}
	
	.about_img .about_img_right {
		padding-left: 2px;
	}
	
	.about_img .about_img_right img {
		margin: 0 3px;
	}
</style>
